博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js图片编辑器插件Filerobot
阅读量:4116 次
发布时间:2019-05-25

本文共 940 字,大约阅读时间需要 3 分钟。

640?wx_fmt=jpeg

Filerobot是一款js图片编辑器插件。Filerobot可以对图片进行修改尺寸,剪裁,旋转,以及使用内置的滤镜对图片进行过滤。

Filerobot-js图片编辑器插件的github网址为:https://github.com/scaleflex/filerobot-image-editor

640?wx_fmt=gif

在页面中引入下面的文件。

初始化插件

filerbot的使用方法非常简单,实例化一个ImageEditor对象,然后通过它打开你想要编辑的图片即可。

const ImageEditor = new FilerobotImageEditor();	ImageEditor.open('https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg');

作为React组件使用

安装:

$ npm install --save filerobot-image-editor

使用:

import React, { useState } from 'react';	import { render } from 'react-dom';	import FilerobotImageEditor from 'filerobot-image-editor';	 	 	const App = () => {	  const src = 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg';	  const [show, toggle] = useState(false);	 	 	  return (	    

Filerobot Image Editor

{ toggle(true) }} alt="example image"/>
{ toggle(false) }} />
) }; render(
, document.getElementById('app'));

640?wx_fmt=jpeg

640?wx_fmt=png

转载地址:http://ibfpi.baihongyu.com/

你可能感兴趣的文章
Flutter Boost的router管理
查看>>
iOS开发支付集成之微信支付
查看>>
C++模板
查看>>
【C#】如何实现一个迭代器
查看>>
【C#】利用Conditional属性完成编译忽略
查看>>
DirectX11 光照演示示例Demo
查看>>
VUe+webpack构建单页router应用(一)
查看>>
Node.js-模块和包
查看>>
(python版)《剑指Offer》JZ01:二维数组中的查找
查看>>
Spring MVC中使用Thymeleaf模板引擎
查看>>
PHP 7 的五大新特性
查看>>
深入了解php底层机制
查看>>
PHP中的stdClass 【转】
查看>>
XHProf-php轻量级的性能分析工具
查看>>
OpenCV gpu模块样例注释:video_reader.cpp
查看>>
OpenCV meanshift目标跟踪总结
查看>>
就在昨天,全球 42 亿 IPv4 地址宣告耗尽!
查看>>
听说玩这些游戏能提升编程能力?
查看>>
如果你还不了解 RTC,那我强烈建议你看看这个!
查看>>
沙雕程序员在无聊的时候,都搞出了哪些好玩的小玩意...
查看>>